<template>
  <section ref="rootDom" class="table-container-con flex-column">
    <div class="header-con">
      <div class="left-con">
        <slot name="container-side" />
      </div>
      <div class="right-con">
        <div v-if="showRefresh" class="icon-con">
          <icon-refresh :class="{ rotating: loading }" @click="refreshHandle" />
        </div>
        <div v-if="showHeightSize" class="icon-con">
          <a-popover
            trigger="click"
            position="bottom"
            class="no-padding-popover"
          >
            <icon-line-height />
            <template #content>
              <a-radio-group
                v-model="heightSizeClass"
                type="button"
                direction="vertical"
                class="radio-group"
              >
                <a-radio
                  v-for="(item, index) in columnsHeightSize"
                  :key="index"
                  :value="item.value"
                >
                  {{ item.label }}
                </a-radio>
              </a-radio-group>
            </template>
          </a-popover>
        </div>
        <div class="icon-con">
          <a-popover
            trigger="click"
            class="columns-prop"
            position="bottom"
            title="自定义列表项"
          >
            <icon-settings />
            <template #content>
              <a-checkbox-group
                v-model="selectColumns"
                direction="vertical"
                @change="selectColumnsChange"
              >
                <VueDraggable
                  v-model="renderColumns"
                  :animation="150"
                  handle=".check-text"
                  @end="dragEnd"
                >
                  <div
                    v-for="(item, index) in renderColumns"
                    :key="index"
                    class="checkbox-con"
                  >
                    <a-checkbox :value="item.dataIndex" />
                    <div class="check-text">
                      <span class="handle">::</span>
                      <span>{{ item.title }}</span>
                    </div>
                  </div>
                </VueDraggable>
              </a-checkbox-group>
            </template>
          </a-popover>
        </div>
        <div v-if="showFullScreen" class="icon-con">
          <icon-fullscreen
            v-show="!nowIsFullscreen"
            @click="fullscreenHandle"
          />
          <icon-fullscreen-exit
            v-show="nowIsFullscreen"
            @click="fullscreenHandle"
          />
        </div>
      </div>
    </div>
    <div class="table-con flex-1" :class="heightSizeClass">
      <slot />
    </div>
  </section>
</template>

<script setup lang="ts">
  import { ref, defineProps, watch } from 'vue';
  import { VueDraggable } from 'vue-draggable-plus';
  import lodash from 'lodash';
  import { isFullscreen, useFullscreen } from '@/common/hooks/full-screen';

  const props = defineProps({
    columns: {
      type: Array,
      default: () => [],
    },
    allColumns: {
      type: Array,
      default: () => [],
    },
    loading: {
      type: Boolean,
      default: false,
    },
    isFullscreen: {
      type: Boolean,
      default: false,
    },
    showRefresh: {
      type: Boolean,
      default: true,
    },
    showHeightSize: {
      type: Boolean,
      default: true,
    },
    showFullScreen: {
      type: Boolean,
      default: true,
    },
  });
  const nowIsFullscreen = ref(isFullscreen);
  const emit = defineEmits([
    'refresh',
    'update:columns',
    'update:isFullscreen',
  ]);
  const rootDom = ref<any>(null);
  const renderColumns = ref<any[]>([]);
  const selectColumns = ref<any[]>([]);
  const columnsHeightSize = [
    { label: '紧凑', value: 'table-mini' },
    { label: '中等', value: 'table-medium' },
    { label: '宽松', value: 'table-large' },
  ];
  const heightSizeClass = ref('table-mini');

  watch(
    () => props.allColumns,
    () => {
      initRenderData();
    }
  );

  const initRenderData = () => {
    renderColumns.value = lodash.cloneDeep(props.allColumns);
    selectColumns.value = props.columns.map((item: any) => item.dataIndex);
  };

  initRenderData();

  const refreshHandle = () => {
    emit('refresh');
  };

  const dragEnd = () => {
    selectColumnsChange();
  };

  const selectColumnsChange = () => {
    const newData = renderColumns.value?.filter((item: any) => {
      return selectColumns.value.includes(item.dataIndex);
    });
    emit('update:columns', newData);
  };

  const fullscreenHandle = () => {
    nowIsFullscreen.value = !nowIsFullscreen.value;
    const main = {
      value: document.querySelector('body'),
    };
    if (nowIsFullscreen.value) {
      useFullscreen(main).enterFullscreen();
    } else {
      useFullscreen(main).exitFullscreen();
    }
  };
</script>

<style lang="less" scoped>
  @import url('../common.less');
  .table-container-con {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    overflow: hidden;
  }

  .header-con {
    display: flex;
    width: 100%;
    padding: 16px 0;
    .left-con {
      flex: 1;
      width: 1px;
      ::v-deep(.arco-btn) {
        margin-right: 8px;
      }
    }

    .right-con {
      display: flex;
    }

    .icon-con {
      width: 26px;
      height: 32px;
      color: #1e2228;
      line-height: 32px;
      text-align: center;
      cursor: pointer;
      font-size: 16px;

      &:hover {
        color: #1e2228;
      }
    }
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .rotating {
    animation: rotate 1s ease-in infinite;
  }

  .table-mini {
    ::v-deep .arco-table-td {
      padding-top: 0;
      padding-bottom: 0;
      line-height: normal;
    }
  }

  .table-medium {
    ::v-deep .arco-table-td {
      line-height: 2;
    }
  }

  .table-large {
    ::v-deep .arco-table-td {
      line-height: 3;
    }
  }

  .radio-group {
    display: block;
    width: 60px;
    line-height: 30px;

    ::v-deep .arco-radio-button {
      display: block;
      width: 100%;
    }
  }

  .checkbox-con {
    display: flex;
    width: 100px;
    height: 30px;
    line-height: 30px;

    .check-text {
      flex: 1;
      width: 1px;
      padding: 0 4px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      cursor: pointer;
      user-select: none;

      .handle {
        padding: 0 5px;
      }
    }
  }
  .table-con {
    overflow: hidden;
  }
</style>

<style lang="less">
  .columns-prop {
    .arco-popover-content {
      max-height: 400px;
      overflow: auto;
    }
  }
</style>
